<template>
	<div v-for="(item, index) in comments || []" :key="index" class="commentItem d-flex">
		<div class="commentItemLeft d-flex justify-content-center me-3 mt-4 flex-shrink-0">
			<img class="rounded-circle" :src="item?.user?.avatarUrl" alt="" />
		</div>
		<div class="pb-4 pt-4 flex-grow-1 commentItemRight">
			<div class="commentItemRightLine1 mb-3">
				<span class="colorA cursor-pointer">{{ item?.user?.nickname }}：</span>
				<span>{{ item.content }}</span>
			</div>
			<div class="commentItemRightLine2 d-flex justify-content-between">
				<div class="text-black-50">
					{{ item.timeStr }}
				</div>
				<div class="text-muted d-flex align-items-center">
					<span class="flex-center cursor-pointer">
						<PraiseIcon
							@click="
								praiseApi(item.commentId, 0);
								api();
							"
							v-if="item.liked"
							color="#ec4141"
							width="12"
							height="12"
						/>
						<PraiseIcon
							@click="
								praiseApi(item.commentId, 1);
								api();
							"
							v-else
							class="hover-opacity"
							width="12"
							height="12"
						/>
						<span v-if="item.likedCount" class="ms-1">{{ item.likedCount }}</span>
					</span>
					<span class="d-inline-block bg-border mx-3" style="width: 1px; height: 10px"></span>
					<span class="flex-center cursor-pointer">
						<CommentIcon class="hover-opacity" width="12" height="12" />
					</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { PropType } from "vue";
type PraiseApi = (cid: number, type: 0 | 1) => Promise<any>;
export default {
	props: {
		api: {
			type: Function,
		},
		praiseApi: {
			type: Function as PropType<PraiseApi>,
		},
		comments: {
			type: Object,
			default: () => ({}),
		},
	},
	setup(props) {
		return {};
	},
};
</script>

<style lang="scss" scoped>
.commentItem {
	.commentItemLeft {
		width: 50px;
		> img {
			width: 35px;
			height: 35px;
		}
	}
	& + & {
		.commentItemRight {
			border-top: 1px solid #dee2e6;
		}
	}
}
</style>
